<template>
<!-- App.vue这个是模板组件是我们vue项目中渲染页面的的主体模板组件,所有的模板组件都是通过这个组件通过使用vue的动态模板渲染的功能在main.js中将这个App.vue主题模板组件渲染到public文件夹下的index.html中id="app的div中来进行渲染页面的" -->
  <div class="container">
    <!-- 动态渲染模板的原理解析: 主要是由url地址栏中的路径地址来控制到底是应该渲染哪一个组件,假如说地址栏中地址为localhost:8080/home,那么通过路径文件判断其符合路由中的设置,然后就可以通过 router-view 双标签来将在这个路由中注册的默认组件渲染进来ok完事 -->
    <!-- 如果再在 router-view 双标签中再加一个name属相的话,匹配到的就是同默认组件文件一块注册下来的对应的name属性值的那个组件 -->
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <!-- 底部 -->
    <!-- 因为底部的组件在由的页面中不需要显示(例如搜索页面),所以我们就可以利用vue的动态模板渲染来通过路由选择(在router下的index.js路由页面中定义)是否应该在相应的页面中显示此组件,就是路由的懒加载 -->
    <!-- 其实vuecli脚手架就是通过vue的路由来分别对应进行注册并渲染到index.html的id=app的div中的,我们就可以在里边选择是否应该显示footer次级组件,显示的话就注册,不显示的话就不注册就行了 -->
    <router-view name="footer"></router-view>
  </div>
</template>

<script>
export default {
  created () {
    const loading = document.getElementById('Loading')
    if (loading !== null) {
      document.body.removeChild(loading)
    }
  }
}
</script>

<style lang="scss">
// 这个是我们写样式的地方,使用第三方的scss库,所以我们需要引入这个scss库,API就是笔记(这个scss库是从人家别人的网站拔下来的),或者直接在我们引入的第三方库文件中的lib/classes.scss中自己查找更多写法
// 直接使用一条@import "@/lib/reset.scss";引入就OK了,因为其他scss文件使用的是模块化的都引入到了reset.scss文件中了,所以直接引入一个即可以了
// @import : "文件路径" ===>注意这个双引号中的@代表的是src这个文件,人家@import这是固定写法用于引入文件
@import "@/lib/reset.scss";
// 使用@include将scss第三方库中的设置.container盒子的宽高为 100% 样式的方法rect()引入进来,参数为宽高
// 使用@include将scss第三方库中的设置.container盒子为弹性盒子的方法flexbox()引进来,这个盒子就成了弹性盒子了
// 使用@include将scss第三方库中的设置.container盒子为弹性盒子主轴为垂直方向,注意这个第三方库直接就把兼容写好了,不用我们自己写
.container{
  @include rect(100%, 100%);
  @include flexbox();
  @include flex-direction(column);
  .box{
    // 引入的这个flex()方法的意思是.container有剩余的多少空间就给.box分配多少剩余的空间,这个就是弹性盒flex的项目属性,直接调用flex()不传参的话就相等于原生css的flex: 1; < === > flex:1 1 100% < === > flex-grow: 1; flex-shrink: 1; flex-basis: 100%;
    // flex-grow: flex项目放大比例,默认位0,不随空间的变大而变大
    // flex-shrink: flex项目缩小比列,默认是1,即当父元素空间不足时,flex项目会等比例的缩小,而不会溢出
    // flex-basis: flex项目占据主轴的空间,默认为auto,1也可写为100%
    @include flex();
    // 设置.box的宽高,宽度为100%,高为auto
    @include rect(100%, 100%);
    // 超出内容则显示滚动条
    @include overflow(auto); // 部分浏览器需要加
    // 将.box容器设为弹性盒子
    @include flexbox();
    // 设置方向为垂直
    @include flex-direction(column);
    .header{
      // rect()方法,设置宽高
      @include rect(100%, auto);
      // background-color()方法,设置背景色
      // @include background-color(#f66);
      // color()方法,设值字体颜色
      @include color(#000000);
      // font-size()方法,设置字体大小
      @include font-size(18px);
    }
    .content {
      // 弹性盒子
      @include flex();
      // 宽高
      @include rect(100%, auto);
      // 溢出显示滚动条
      @include overflow(auto);
    }

  }
  .footer{
    // 设置.footer的宽高
    @include rect(100%, 0.55rem);
    // 背景色
    @include background-color(#ffffff);
    position: relative;
    // 最下边的只用显示上边框的圆
    .addbg {
      @include rect(0.7rem, 0.7rem);
      @include background-color(#ffffff);
      border-radius: 50%;
      position: absolute;
      top: -.22rem;
      left: 50%;
      margin-left: -.35rem;
      border: .005rem #cac9c9 solid;
      z-index: -1;
    }
    ul {
      // 宽高
      @include rect(100%, 100%);
      // 边框
      border-top: .005rem #cac9c9 solid;
      // 设置ul为弹性盒子
      @include flexbox();
      position: relative;
      // 最上边用于存放记账内容的div圆
      .add{
        @include rect(0.68rem, 0.68rem);
        @include background-color(#ffffff);
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: -.22rem;
        margin-left: -.34rem;
        text-align: center;
      }
      li {
        // 设置flex的项目li的项目属性为 1 1 100%
        @include flex(); // flex: 1;
        // 每个li的宽高 宽为自动,高为父容器的100%高
        @include rect(auto, 100%);
        // 水平垂直居中
        // 弹性盒
        @include flexbox();
        // 主轴方向:垂直
        @include flex-direction(column);
        // 设置主轴对齐方式:justify-content()方法,默认是space-between:项目两端间隔相等
        @include justify-content();
        // 设置交叉轴对齐方法:align-items()方法,默认是center交叉轴内容居中对齐,
        @include align-items();
        p {
          @include font-size(.11rem);
        }
      }
    }
  }
}
</style>
